iT邦幫忙

2024 iThome 鐵人賽
DAY 0
0
佛心分享-IT 人自學之術

SASS/SCSS的認識與實作系列 第 21 篇

Day21 部件化設計 (Component-based Design)

16th鐵人賽
68 瀏覽

  • 分享至 

  • xImage
    •  
  • 是一種將頁面或應用程式分解成獨立、可重複用的部件（components）的設計方法。每個部件都負責處理自己的一小部分功能或樣式，並且能夠被獨立開發、測試和重用。這些部件可以是按鈕、導航欄、卡片、表單等，讓開發者可以模塊化地建構應用
  1. 特點
  • 重用性：每個部件可以在不同的頁面或專案中重複使用
  • 獨立性：部件之間相對獨立，能夠各自負責不同的功能或外觀
  • 易維護：變更部件樣式或功能時，不會影響其他部件，這提高了維護的效率
  1. 使用Sass進行部件化設計的好處
  • 可重用性：SASS 的變數、混合器、函數等工具讓設計可以模塊化，並在多個部件中重複使用
  • 結構清晰：使用 SASS 可以將每個部件的樣式拆分成獨立的檔案，方便管理和維護
  • 一致性：變數和混合器的使用，確保樣式在不同部件中保持一致
  • 靈活性：透過 SASS 的繼承、循環結構等功能，樣式可以根據需求輕鬆調整
  1. 應用
  • 網站：例如按鈕、導航欄、頁腳、卡片、表單等常見的 UI 元件都可以用部件化設計進行重複使用
  • Web 應用：可將應用的每個功能部分（例如彈窗、表單驗證、訊息提醒）設計成部件，方便開發和擴展
  • 設計系統：SASS 非常適合用來建立設計系統，確保所有部件在樣式和行為上保持一致
  1. 該注意之處
  • 過度分解：避免過度將應用切分成太多部件，這會導致程式碼過於複雜、難以管理
  • 命名規範：每個部件的樣式和類名應遵循一致的命名規範，例如 BEM（Block Element Modifier）方法，以避免樣式衝突
  • 組件依賴性：部件應盡量保持獨立，避免過度依賴其他部件，否則修改其中一個部件可能會影響到其他部分
  • 性能：大量小型部件可能會導致性能問題，特別是在網頁渲染過程中

上一篇
Day20 SASS 構建可重複使用的網格系統
下一篇
Day22 部件化設計例子
系列文
SASS/SCSS的認識與實作 共 30 篇
  1. 26
    Day26 模塊化 SASS 架構例子
  2. 27
    Day27 SASS 相關的開發工具
  3. 28
    Day28 自動編譯
  4. 29
    Day29 SASS 生成主題
  5. 30
    Day 30 深淺色主題實作
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22196 篇
完賽人數
602 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙